<template>
    <lib-doc :libDocData="libDocData"></lib-doc>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_tree_demo',
    setup () {
        const libDocData: LibDocInterface = {
            title: '树Tree',
            docList: [
                {
                    label: '引入组件',
                    value: `
        import { ITree } from 'wd-platform-library'`
                },
                {
                    label: '创建树Tree对象',
                    type: 'pre',
                    value: `
    const treeData = reactive<TreeInterFace<MenuResult>>({
            loading: false, //加载状态
            //数据源
            // status:1,则出现删除线
            // disabled:true,禁用
            // disableCheckbox:复选框禁选,
            data: [],  
            operation: [], // 右侧功能集合
            options: {
                checkable: true, // 是否展示复选框
                checkStrictly: true, // 是否父子关联
                checkedKeys:[], // 默认选中集合
                defaultExpandAll: true, // 是否默认展开
                replaceFields: { children: 'children', title: 'menuName', key: 'id' } //配置展示字段
            }
    })`
                },
                {
                    label: 'options对象说明',
                    type: 'pre',
                    value: `
    存放antdvTree的配置属性
     `
                },
                {
                    label: 'operation配置',
                    type: 'pre',
                    value: `
    {
            label: '删除', //按钮名字
            isShow: true,  //按钮权限控制
            buttonFun: 'deleteFun',//按钮回调方法
            width: 48,
            template:"cus_template", //自定义
            remindData: {   //是否需要弹窗
                isShow: true,
                remindTitle: '是否删除',
                remindContext: '删除后数据将无法恢复'
            }
    }              
   `
                },
                {
                    label: '公共回调方法',
                    type: 'pre',
                    value: `
const clickNodeFun = () => {};//点击每一行回调方法
const selectNodeFun=()=>{}; 选择复选框回调
`
                }
            ]
        }
        return {
            libDocData
        }
    },
    methods: {},
    components: { LibDoc }
})
</script>
